import 'package:flutter/material.dart';

import 'enlargeImage.dart';
import 'imgBox.dart';

class AboutPage extends StatefulWidget {
  const AboutPage({super.key});

  @override
  State<AboutPage> createState() => _AboutPageState();
}

class _AboutPageState extends State<AboutPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
        child: Column(
          children: [
            Container(
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text(
                            'About',
                            style: TextStyle(
                                fontSize: 24, fontWeight: FontWeight.w800),
                          ),
                        ),
                        Divider(
                          endIndent: 980,
                          thickness: 3.5,
                          color: Colors.pink[100],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Expanded(child: LayoutBuilder(
              builder: (BuildContext, BoxConstraints) {
                var width = BoxConstraints.maxWidth; // 父控件的最大宽度
                var height = BoxConstraints.maxHeight; // 父控件的最大高度

                var leftBoxWidth = width * 0.7; // 根据 7:3 的比值切分左右区域宽度
                var rightBoxWidth = width * 0.3;
                var leftBoxHeight = height / 2; // 上下高度平分

                return Row(
                  children: [
                    Column(
                      children: [
                        GDimgBox(
                          leftBoxWidth: leftBoxWidth,
                          leftBoxHeight: leftBoxHeight,
                          title: 'Inspire',
                          imgString: 'images/skills1.jpg',
                          tag: 'Inspire',
                          color: Colors.blue,
                        ),
                        GDimgBox(
                          leftBoxWidth: leftBoxWidth,
                          leftBoxHeight: leftBoxHeight,
                          title: 'Develop',
                          imgString: 'images/skills2.jpg',
                          tag: 'Develop',
                          color: Colors.purple,
                        ),
                      ],
                    ),
                    GDimgBox(
                      leftBoxWidth: rightBoxWidth,
                      leftBoxHeight: height,
                      title: 'Influence',
                      imgString: 'images/skills3.jpg',
                      tag: 'influence',
                      color: Colors.red,
                    ),
                  ],
                );
              },
            ))
          ],
        ),
      ),
    );
  }
}

class GDimgBox extends StatelessWidget {
  const GDimgBox({
    super.key,
    required this.leftBoxWidth,
    required this.leftBoxHeight,
    required this.title,
    required this.imgString,
    required this.tag,
    required this.color,
  });

  final double leftBoxWidth;
  final double leftBoxHeight;
  final String title;
  final String imgString;
  final String tag;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return EnlargeImage(
            imgString: imgString,
            title: title,
            tag: tag,
          );
        }));
      },
      child: imgBox(
        width: leftBoxWidth,
        height: leftBoxHeight,
        color: color,
        title: title,
        imgString: imgString,
        tag: tag,
      ),
    );
  }
}
